<template>
  <p>{{ obj.hobby.eat }}</p>
  <button @click="obj.hobby.eat = '面条'">修改 obj.hobby.eat</button>
</template>

<script>
import { watch, ref, isReactive, isRef } from 'vue'
export default {
  name: 'App',
  setup() {
    /* reactive({
      value: {
        hobby: {
          eat: '西瓜',
        },
      },
    }) */
    const obj = ref({
      hobby: {
        eat: '西瓜',
      },
    })
    console.log(isRef(obj)) // true
    // !说明 obj.value 是一个 reactive 类型数据
    console.log(isReactive(obj.value)) // true
    // 这样也可以触发监听，并且是深度的
    // !当 watch 监听的是一个 reactive 类型的数据的时候，默认就是开启深度监听的，并且改都改不了
    watch(obj.value, (newValue, oldValue) => {
      console.log(newValue === oldValue)
    })

    return { obj }
  },
}
</script>
